<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户展示</span>
      </div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection"> </el-table-column>

        <el-table-column label="账号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.account }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户组">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.userGroup }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.ctime | dateFormate
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>

      <el-row>
        <el-button type="danger" @click="batchDel">批量删除</el-button>
        <el-button type="success" @click="toggleSelection">取消选择</el-button>
      </el-row>

      <!-- 弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="alterData" :model="alterData" label-width="100px">
          <el-form-item label="账号" prop="account">
            <el-input
              v-model="alterData.account"
              placeholder="账号"
              size="small"
              clearable
              style="width:70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户组" prop="userGroup">
            <el-select
              v-model="alterData.userGroup"
              clearable
              placeholder="请选择用户组"
              size="small"
              style="width:70%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleUpdataUser">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getUserList,
  delUserInfo,
  batchUserInfo,
  updateUserInfo
} from '../../req/userAjax'
import { alterError, alterSuccess, confirmMsg } from '@/util/msgTips'

import { dateFor } from '@/util/dateFormat'

import { validateAccount, validateuserGroup } from '@/util/rule/fromRule'
export default {
  data () {
    return {
      tableData: [], // 表格数据
      currentPage: 1,
      pageSize: 5,
      multipleSelection: [], // 下拉框数据
      totalCount: 0, // 总数据
      dialogVisible: false,
      options: [
        {
          value: '超级管理员',
          label: '超级管理员'
        },
        {
          value: '普通管理员',
          label: '普通管理员'
        },
        {
          value: '员工',
          label: '员工'
        },
        {
          value: '组长',
          label: '组长'
        },
        {
          value: '工具人',
          label: '工具人'
        }
      ],
      alterData: {
        id: '',
        account: '',
        userGroup: ''
      },

      ruleForm: {
        account: '',
        userGroup: ''
      },
      rules: {
        account: [{ validator: validateAccount, trigger: 'blur' }],
        userGroup: [{ validator: validateuserGroup, trigger: 'change' }]
      }
    }
  },

  computed: {
    //   计算总页数
    totalPage () {
      return this.totalCount / this.pageSize
    }
  },
  methods: {
    // 编辑,
    handleEdit (data) {
      this.dialogVisible = true
      this.alterData = { ...data }
    },
    // 关闭
    handleClose () {
      this.dialogVisible = false
    },

    async handleUpdataUser () {
      // 发送修改请求
      const { code, msg } = await updateUserInfo(this.alterData)
      if (code === 0) {
        this.getCurrentPageInfo()
        alterSuccess(msg)
      } else {
        alterError(msg)
      }
      this.dialogVisible = false
    },

    // 删除
    handleDelete (index, id) {
      confirmMsg(async () => {
        // 点击确定的操作(调用接口)
        const { msg, code } = await delUserInfo(id)
        if (code === 0) {
          alterSuccess(msg, 'success')
          this.getCurrentPageInfo()
        } else {
          alterError(msg, 'error')
        }
      })
    },

    // 批量删除
    batchDel () {
      // 选中的数据
      const td = this.multipleSelection
      if (td.length === 0) {
        alterError('请选择要删除的数据')
        return
      }
      // 点击确认后调用
      confirmMsg(async () => {
        const ids = td.map(pre => {
          return pre.id
        })
        this.tableData = this.tableData.filter(el => {
          return !ids.includes(el.id)
        })

        const { code, msg } = await batchUserInfo(JSON.stringify(ids))
        if (code === 0) {
          alterSuccess(msg, 'success')
          this.getCurrentPageInfo()
        } else {
          alterError(msg, 'error')
        }
      })

      // 如果没有数据了,需要再次请求
      this.getCurrentPageInfo()
    },

    // 处理select选择
    handleSelectionChange (row) {
      this.multipleSelection = row
    },

    // 取消选择
    toggleSelection () {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 页面大小发送改变时
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      // 发送请求获取
      this.getCurrentPageInfo()
    },
    // 获取当前页面
    handleCurrentChange (currentPage) {
      this.getCurrentPageInfo(currentPage)
    },

    // 封装获取当前页面的数据
    async getCurrentPageInfo (
      currentPage = this.currentPage,
      pageSize = this.pageSize
    ) {
      //  获取用户列表   为了避免重复发送请求,先请求多一点数据,然后缓存
      const { data, total } = await getUserList({ currentPage, pageSize })
      this.tableData = [...data]
      this.totalCount = total
    }
  },

  // 创建时发送请求获取数据
  async created () {
    this.getCurrentPageInfo()
  },

  // 日期格式化
  filters: {
    dateFormate (date) {
      return dateFor(date)
    }
  }
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 30px;
}

.el-row {
  margin-top: 30px;
}
</style>
